<template>
  <el-header class="header">
    <div>
    </div>
    <router-link to="/" tag="p" class="header-link">进入网站首页 >></router-link>
  </el-header>
  <div class="login-container">
    <form class="register-form" @submit.prevent="submitRegister">
      <div class="form-item">
        <label for="name">用户名</label>
        <input id="name" type="text" placeholder="请输入用户名" v-model="user.name">
      </div>
      <div class="form-item">
        <label for="phone">电话号码</label>
        <input id="phone" type="text" placeholder="请输入电话号码" v-model="user.phone">
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <input id="password" type="password" placeholder="请输入密码" v-model="user.password">
      </div>
      <div class="form-item">
        <label for="confirmpassword">确认密码</label>
        <input id="confirmpassword" type="password" placeholder="请确认密码" v-model="user.confirmpassword">
      </div>
      <button type="submit">注册</button>
      <hr>
      <div class="options-container">
<!--        <p class="tip">忘记密码</p>-->
        <router-link to="/login" tag="p" class="tip">已有账号？点击登录</router-link>
      </div>
    </form>
  </div>
</template>

<script>
import {ref} from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

export default {
  setup(){
    const user = ref({
      name:'',
      phone:'',
      password:'',
      confirmpassword:''
    });

    const router = useRouter();

    const submitRegister = async () =>{
      console.log('submitRegister方法被调用');
      // 判空操作
      if (!user.value.name) {
        ElMessage.error('用户名不能为空');
        return;
      }
      if (!user.value.phone) {
        ElMessage.error('电话号码不能为空');
        return;
      }
      if (!user.value.password) {
        ElMessage.error('密码不能为空');
        return;
      }
      if (!user.value.confirmpassword) {
        ElMessage.error('确认密码不能为空');
        return;
      }
      if (user.value.password !==user.value.confirmpassword){
        ElMessage.error('两次输入的密码不一致');
        return;
      }

      console.log('发送注册请求:', {
        userName: user.value.name,
        userPhone: user.value.phone,
        password: user.value.password
      });

      try{
        const response = await axios.post('/api/user/register',{
          userName: user.value.name,
          userPhone:user.value.phone,
          password:user.value.password
        });
        if(response.data.code === 200){
          ElMessage.success('注册成功');
          // 注册成功后跳转到登录页面
          router.push('/login');  // 使用router.push进行跳转
        }else if(response.data.code === 500){
          ElMessage.error('手机号已被注册'); // 手机号已被注册
        }
        else {
          ElMessage.error(response.data.message || '注册失败')
        }
      }catch (error){
        console.error('注册失败',  error.response ? error.response.data : error.message);
        ElMessage.error('注册失败，请稍后再试');
      }
    };

    return{
      user,
      submitRegister
    };
  }
};
</script>

<style scoped>
.header {
  display: flex;
  height: 53px;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
}

.header div{
  height: 80%;
  width: 10%;
  /*background-color: pink;*/
  vertical-align: center;
}
.header-link{
  margin: 0;
  cursor:pointer;
  color: white;
}
.header-link:hover{
  font-size: 16px;
  color: #ffd2d8;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 53px);
  background-color: #f5f5f5;
  background-image: url("../../assets/images/bg.jpg");
  background-size: cover; /* 使背景图片完全覆盖容器 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.register-form {
  width: 25%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.register-form hr{
  margin: 10px auto;
  width: 80%;
  border: none;
  border-top: 1px solid #ddd;
}

.form-item {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #ff84b0;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ffd2d8;
  color: black;
}

.options-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.tip {
  font-size: 13px; /* 设置提示文本的字体大小 */
  color: #666;
  cursor: pointer;
}

/* 响应式布局 */

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 767px) {
  .register-form {
    width: 90%; /* 表单宽度占据大部分屏幕 */
    padding: 15px; /* 减小内边距 */
  }

  .tip {
    font-size: 12px;
  }

  button {
    padding: 8px;
  }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 991px) {
  .register-form {
    width: 70%; /* 设置表单宽度为 750px */
  }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) and (max-width: 1199px) {
  .register-form {
    width: 50%; /* 设置表单宽度为 970px */
  }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
  .register-form {
    width: 30%; /* 设置表单宽度为 1170px */
  }
}
</style>